<template>
	<view v-show="!editData.seek_id">
		<div class="flex flex-wrap between" v-if="loading==true" >
			<div v-if="tabIndex==0" class="s1" v-for="(item,ind) in dataArr.list" style="position: relative;"
				@click="dian(item.label_id)">
				<image v-if="dian_index==item.label_id" :src="item.fb_x_label_logo" mode="widthFix" class="w-150 h-55"
					style="position: absolute;top: 0;left: 0;z-index: 2;"></image>
				<image :src="item.fb_label_logo" mode="widthFix" class="w-150 h-55"></image>
				<view style="color: white;position: absolute;top: 15%;left: 5%;font-size: 12px;">{{item.label_name}}
				</view>
			</div>




			<!-- <div class="s2">
				<image v-if="index!=2" src="/static/publish/s2.png" mode="widthFix" class="w-150 h-55"></image>
				<image v-else src="/static/publish/s2s.png" mode="widthFix" class="w-150 h-55"></image>
			</div>
			<div class="s3">
				<image v-if="index!=3" src="/static/publish/s3.png" mode="widthFix" class="w-150 h-55"></image>
				<image v-else src="/static/publish/s3s.png" mode="widthFix" class="w-150 h-55"></image>
			</div>
			<div class="s4">
				<image v-if="index!=4" src="/static/publish/s4.png" mode="widthFix" class="w-150 h-55"></image>
				<image v-else src="/static/publish/s4s.png" mode="widthFix" class="w-150 h-55"></image>
			</div>
			<div class="s5">
				<image v-if="index!=5" src="/static/publish/s5.png" mode="widthFix" class="w-150 h-55"></image>
				<image v-else src="/static/publish/s5s.png" mode="widthFix" class="w-150 h-55"></image>
			</div>
			<div class="s6">
				<image v-if="index!=6" src="/static/publish/s6.png" mode="widthFix" class="w-150 h-55"></image>
				<image v-else src="/static/publish/s6s.png" mode="widthFix" class="w-150 h-55"></image>
			</div>
			<div class="s7">
				<image v-if="index!=7" src="/static/publish/s7.png" mode="widthFix" class="w-150 h-55"></image>
				<image v-else src="/static/publish/s7s.png" mode="widthFix" class="w-150 h-55"></image>
			</div>
			<div class="s8">
				<image v-if="index!=8" src="/static/publish/s8.png" mode="widthFix" class="w-150 h-55"></image>
				<image v-else src="/static/publish/s8s.png" mode="widthFix" class="w-150 h-55"></image>
			</div> -->
		</div>


		<div v-if="z_dian==dian_index&&tabIndex==0"
			style="width: 98%;margin-left:1%;height: 1px;border-bottom: 1px solid #ccc;margin-top: 15rpx;"></div>

		<div v-if="z_dian==dian_index&&tabIndex==0" class="fz30 text-gray-16 mt-37 mb-30">标签类别(单选)</div>

		<view v-if="z_dian==dian_index&&tabIndex==0" style="width: 100%;" class="between flex flex-wrap ">
			<view @click="dianji(item.z_label_id)" class="brand s1 w-150 h-55"
				:class="z_label_id==item.z_label_id?'on':''" v-for="(item,ind) in z_list"><text
					style="font-size: 12px;">{{item.label_name}}</text></view>
		</view>
 

		<div v-if="tabIndex==1" class="fz30 text-gray-16 mt-37 mb-30">标签类别(单选)</div>

		<view v-if="tabIndex==1" style="width: 100%;" class="between flex flex-wrap ">
			<view @click="dianji(item.z_label_id)" class="brand s1 w-150 h-55"
				:class="z_label_id==item.z_label_id?'on':''" v-for="(item,ind) in ziyuan_list"><text
					style="font-size: 12px;">{{item.label_name}}</text></view>

		</view>
	</view>

</template>

<script>
	export default {
		props: {
			editData: {
				type: Object,
				default: {}
			},
			index: {
				type: Number,
				default: 0
			},
			tabIndex: {
				type: [Number,String,null],
				default: 0
			},
			dataArr: {
				type: Object,
				default () {
					return {};
				}
			},
		},
		data() {
			return {
				dian_index: 1,
				z_dian: '',
				z_list: [],
				z_label_id: '',
				loading:false,
				ziyuan_list:[]
			}
		},
		mounted() {
			this.dian_index = this.index
			var lists = this.dataArr
			console.log(lists)
			
			if(lists.list){
				for (var i = 0; i < lists.list.length; i++) {
					if (lists.list[i].z_list.length > 0) {
						this.z_list = lists.list[i].z_list
						this.z_dian = lists.list[i].label_id
						break
					}
				}
			}
			this.ziyuan_list = lists.ziyuan_list
			
			
			if(this.editData.label_id){
				this.dian_index = this.editData.label_id
			}
			if(this.editData.z_label_id){
				this.z_label_id = this.editData.z_label_id
			}
			
			this.loading=true
			
		},
		methods: {
			dian(i) {
				this.dian_index = i
				this.$emit("update", 'label_id', i)
			},
			dianji(i) {
				this.z_label_id = i
				this.$emit("update", 'z_label_id', i)
			}
		}
	}
</script>

<style>
	.brand {
		background-color: #f5f5f5;
		color: #000;
		margin-top: 10px;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.on {
		background-color: #AC5FF8 !important;
		color: #fff;
	}
</style>